<template>
  <div>
    <h1 v-color="color1">指令的值1</h1>
    <h1 v-color="color2">指令的值2</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color1: "red",
      color2: "green",
    };
  },
  directives: {
    color: {
      // 插入时执行
      inserted(el, binding) {
        console.log(el);
        el.style.color = binding.value;
      },
      // 更新时执行
      update(el, binding) {
        console.log("指令的值更新了");
        el.style.color = binding.value;
      },
    },
  },
};
</script>

<style>
</style>